<template>
  <div class="house-detail">
    <!-- 基本信息 -->
    <div class="title">基本信息</div>
    <div class="form">
      <!-- 地址 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.roomAddress"
          title="地址"
          placeholder="请填写地址"
          :isInput="!isRead" />
      </div>
      <!-- 房号 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.roomNo"
          title="房号"
          placeholder="请输入房号"
          :isInput="!isRead" />
      </div>
      <!-- 类型 -->
      <div class="form-item">
        <picker
          v-if="!isRead"
          :range="roomTypeData"
          :value="roomType"
          @change="roomTypeChange">
          <CustomInput
            title="类型"
            placeholder="请选择类型"
            :value="formItem.roomType" />
        </picker>
        <CustomInput
          v-else
          title="类型"
          placeholder="请选择类型"
          :value="formItem.roomType" />
      </div>
      <!-- 户型 -->
      <div v-show="roomType == 0" class="form-item">
        <picker
          v-if="!isRead"
          mode="multiSelector"
          :range="roomModelData"
          :value="roomModel"
          @change="roomModelChange">
          <CustomInput
            title="户型"
            placeholder="请选择户型"
            :value="formItem.__custom_roomModel" />
        </picker>
        <CustomInput
          v-else
          title="户型"
          placeholder="请选择户型"
          :value="formItem.__custom_roomModel" />
      </div>
      <!-- 出租类型 -->
      <div v-show="roomType == 0" class="form-item">
        <picker
          v-if="!isRead"
          :range="rentTypeData"
          :value="rentType"
          @change="rentTypeChange">
          <CustomInput
            title="出租类型"
            placeholder="请选择出租类型"
            :value="formItem.rentType" />
        </picker>
        <CustomInput
          v-else
          title="出租类型"
          placeholder="请选择出租类型"
          :value="formItem.rentType" />
      </div>
      <!-- 楼层 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.roomFloor"
          inputType="number"
          title="楼层"
          placeholder="请输入楼层"
          :isInput="!isRead" />
      </div>
      <!-- 面积 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.roomArea"
          inputType="number"
          title="面积"
          company="平方"
          placeholder="请输入面积"
          :isInput="!isRead" />
      </div>
      <!-- 结算 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.rentSettle"
          inputType="number"
          title="结算"
          company="个月"
          placeholder="请输入结算"
          :isInput="!isRead" />
      </div>
      <!-- 租金 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.rentMoney"
          inputType="number"
          title="租金"
          placeholder="请输入租金"
          :isInput="!isRead" />
      </div>
      <!-- 门锁密码 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.doorPassword"
          title="门锁密码"
          placeholder="请输入门锁密码(选填)"
          :isInput="!isRead" />
      </div>
    </div>

    <!-- 水费 -->
    <div class="title">水费</div>
    <div class="form">
      <!-- 水表编号 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.waterMeterNo"
          title="水表编号"
          placeholder="请输入水表编号"
          :isInput="!isRead" />
      </div>
      <!-- 水价 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.waterPrice"
          inputType="number"
          title="水价"
          company="元/吨"
          placeholder="请输入水价"
          :isInput="!isRead" />
      </div>
      <!-- 最低用量 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.waterMinUsed"
          inputType="number"
          title="最低用量"
          company="吨"
          placeholder="请输入最低用量"
          :isInput="!isRead" />
      </div>
      <!-- 最近表值 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.waterNowUsed"
          inputType="number"
          title="最近表值"
          company="吨"
          placeholder="请输入最近表值"
          :isInput="!isRead" />
      </div>
    </div>

    <!-- 电费 -->
    <div class="title">电费</div>
    <div class="form">
      <!-- 电表编号 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.electriceMeterNo"
          title="电表编号"
          placeholder="请输入电表编号"
          :isInput="!isRead" />
      </div>
      <!-- 电价 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.electricPrice"
          inputType="number"
          title="电价"
          company="元/度"
          placeholder="请输入电价"
          :isInput="!isRead" />
      </div>
      <!-- 最低用量 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.electricMinUsed"
          inputType="number"
          title="最低用量"
          company="度"
          placeholder="请输入最低用量"
          :isInput="!isRead" />
      </div>
      <!-- 最近表值 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.electricNowUsed"
          inputType="number"
          title="最近表值"
          company="度"
          placeholder="请输入最近表值"
          :isInput="!isRead" />
      </div>
    </div>

    <!-- 燃气费 -->
    <div class="title">燃气费</div>
    <div class="form">
      <!-- 燃气表编号 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.gasMeterNo"
          title="燃气表编号"
          placeholder="请输入燃气表编号"
          :isInput="!isRead" />
      </div>
      <!-- 燃气价 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.gasPrice"
          inputType="number"
          title="燃气价"
          company="元/方"
          placeholder="请输入燃气价"
          :isInput="!isRead" />
      </div>
      <!-- 最低用量 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.gasMinUsed"
          inputType="number"
          title="最低用量"
          company="方"
          placeholder="请输入最低用量"
          :isInput="!isRead" />
      </div>
      <!-- 最近表值 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.gasNowUsed"
          inputType="number"
          title="最近表值"
          company="方"
          placeholder="请输入最近表值"
          :isInput="!isRead" />
      </div>
    </div>

    <!-- 固定费用 -->
    <div class="title">固定费用</div>
    <div class="form">
      <!-- 管理费 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.manageMoney"
          inputType="number"
          title="管理费"
          placeholder="请输入管理费"
          :isInput="!isRead" />
      </div>
      <!-- 卫生费 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.hygieneMoney"
          inputType="number"
          title="卫生费"
          placeholder="请输入卫生费"
          :isInput="!isRead" />
      </div>
      <!-- 网费 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.netMoney"
          inputType="number"
          title="网费"
          placeholder="请输入网费"
          :isInput="!isRead" />
      </div>
      <!-- 电视费 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.tvMoney"
          inputType="number"
          title="电视费"
          placeholder="请输入电视费"
          :isInput="!isRead" />
      </div>
      <!-- 电梯费 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.giftMoney"
          inputType="number"
          title="电梯费"
          placeholder="请输入电梯费"
          :isInput="!isRead" />
      </div>
      <!-- 其他 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.otherMoney"
          inputType="number"
          title="其他"
          placeholder="请输入其他"
          :isInput="!isRead" />
      </div>
    </div>

    <!-- 收租信息 -->
    <div class="title">收租信息</div>
    <div class="form">
      <!-- 抄表日 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.readMeterDay"
          inputType="number"
          title="抄表日"
          company="号"
          placeholder="请输入收租日"
          :isInput="!isRead" />
      </div>
      <!-- 收租日 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.rentMoneyDate"
          inputType="number"
          title="收租日"
          company="号"
          placeholder="请输入收租日"
          :isInput="!isRead" />
      </div>
      <!-- 提前 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.beforeDays"
          inputType="number"
          title="提前"
          company="天提醒"
          placeholder="请输入天数"
          :isInput="!isRead" />
      </div>
      <!-- 备注 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.remark"
          title="备注"
          placeholder="请输入备注"
          :isInput="!isRead" />
      </div>
    </div>

    <!-- 保存按钮 -->
    <div v-if="!isRead" class="action">
      <i-button type="primary" @click="actionClick">保存</i-button>
    </div>
  </div>
</template>

<script>
import CustomInput from 'components/CustomInput/CustomInput'
import CustomWrapInput from 'components/CustomWrapInput/CustomWrapInput'
import { mapState } from 'vuex'
import { ERR_OK } from 'api/config'
import { saveData } from 'api/houseDetail'
import { roomModelData } from 'common/js/modules'
import { shareMixin } from 'common/js/mixins'

export default {
  mixins: [shareMixin()],
  components: {
    CustomInput,
    CustomWrapInput
  },
  computed: {
    isRead () {
      return this.actionKey === 'read'
    },
    ...mapState({
      currentItem: state => state.houseDetail.currentItem,
      actionKey: state => state.houseDetail.actionKey
      // address: state => state.releaseAddress.address,
    })
  },
  mounted () {
    this.initData()
  },
  // watch: {
  //   address (newAddress) {
  //     this.changeAddress(newAddress)
  //   }
  // },
  data () {
    return {
      formItem: {},
      roomType: 0,
      roomTypeData: ['居住', '商铺', '厂房', '办公', '仓库', '其它'],
      roomModel: [0, 0, 0],
      roomModelData: roomModelData(),
      rentType: 0,
      rentTypeData: ['整租-整套房子出租', '合租-单个房间出租', '合租-床位出租']
    }
  },
  methods: {
    initData () {
      if (this.actionKey === 'edit' || this.actionKey === 'read') {
        this.formItem = JSON.parse(JSON.stringify(this.currentItem))

        this.roomType = this.roomTypeData.findIndex(item => item === this.formItem.roomType)
        this.roomModel = this.formItem.roomModel.split(',')
        this.roomModelFilter()
        this.rentType = this.rentTypeData.findIndex(item => item === this.formItem.rentType)
      } else {
        this.roomType = 0
        this.roomModel = [0, 0, 0]
        this.rentType = 0

        this.formItem = {
          roomAddress: '',
          roomNo: '',
          roomType: '居住',
          roomModel: '0,0,0',
          __custom_roomModel: '0室 / 0厅 / 0卫',
          rentType: '整租-整套房子出租',
          roomFloor: 1,
          rentSettle: 1,
          roomArea: 0.00,
          rentMoney: 0.00,
          doorPassword: '',
          waterMeterNo: '',
          waterPrice: 0,
          waterMinUsed: 0,
          waterNowUsed: 0,
          electriceMeterNo: '',
          electricPrice: 0,
          electricMinUsed: 0,
          electricNowUsed: 0,
          gasMeterNo: '',
          gasPrice: 0,
          gasMinUsed: 0,
          gasNowUsed: 0,
          manageMoney: 0,
          hygieneMoney: 0,
          netMoney: 0,
          tvMoney: 0,
          giftMoney: 0,
          otherMoney: 0,
          readMeterDay: 1,
          rentMoneyDate: 1,
          beforeDays: 0,
          remark: ''
        }
      }
    },
    actionClick () {
      const obj = JSON.parse(JSON.stringify(this.formItem))

      this.deleteCustomKey(obj)

      this.saveData(obj)
    },
    deleteCustomKey (obj) {
      for (let key in obj) {
        if (key.indexOf('__custom_') > -1 || obj[key] === null) {
          delete obj[key]
        }
      }
    },
    rentTypeChange (e) {
      this.rentType = e.target.value
      this.formItem.rentType = this.rentTypeData[this.rentType]
    },
    roomModelFilter () {
      const arr = []

      this.roomModel.map((item, index) => {
        arr.push(`${this.roomModelData[index][this.roomModel[index]]}`)
      })

      this.formItem.__custom_roomModel = arr.join(' / ')
    },
    roomModelChange (e) {
      this.roomModel = e.target.value
      this.formItem.roomModel = this.roomModel.join(',')

      this.roomModelFilter()
    },
    roomTypeChange (e) {
      this.roomType = e.target.value
      this.formItem.roomType = this.roomTypeData[this.roomType]
    },
    // changeAddress (newAddress) {
    //   const addressFormat = ['city', 'roadDesc']
    //   this.formItem.roomAddress = ''

    //   addressFormat.map(key => {
    //     if (newAddress[key]) {
    //       this.formItem.roomAddress += `${newAddress[key]} `
    //     }
    //   })
    // },
    // customInputClick (title) {
    //   let url = ''
    //   switch (title) {
    //     case '地址':
    //       url = 'releaseAddress'
    //       break
    //   }

    //   wx.navigateTo({ url: `/pages/${url}/main` })
    // },
    async saveData (data) {
      this.$showLoading('保存中')

      const res = await saveData(data)

      this.$hideLoading()

      if (res.code === ERR_OK) {
        this.$showToast({
          title: '保存成功',
          success: () => {
            wx.navigateBack()
          }
        })
      } else {
        this.$showToast({
          title: (res && res.msg) || '保存失败',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .house-detail {
    width: 100%;
    overflow-x: hidden;
    > .title {
      width: 100%;
      line-height: 40px;
      background-color: rgb(248, 248, 248);
      font-size: 14px;
      padding-left: 10px;
    }
    > .form {
      > .form-item {
        border-bottom: 1px solid rgb(238, 238, 238);
      }
    }
  }
</style>
